<template>
  <Modal
    v-model="lookAttribute.showModal"
    width="800"
    :title="lookAttribute.title"
    @on-cancel="closeModal('param')"
  >
    <Form
      ref="param"
      :model="param"
      :rules="ruleValidate"
      :disabled="lookAttribute.disabled"
      :label-width="90"
    >
      <FormItem label="选择身份" prop="mode">
        <Select v-model="param.mode" :label-in-value="true" @on-change="selectIdentity">
          <Option :value="0" label="个人" :key="0">个人</Option>
          <Option :value="1" label="保险公司" :key="1">保险公司</Option>
        </Select>
      </FormItem>
      <FormItem label="用户" prop="uid" v-show="param.mode == 0">
        <Select :label-in-value="true" filterable v-model="param.uid">
          <Option
            v-for="(item,index) in userList"
            :value="item.id"
            :label="item.nickname"
            :key="index"
          >{{ item.nickname }}</Option>
        </Select>
      </FormItem>
      <FormItem label="保险人员" prop="insuranceId" v-show="param.mode == 1">
        <Select :label-in-value="true" filterable v-model="param.uid" @on-change="selectInsurance">
          <Option
            v-for="(item,index) in insuranceList"
            :value="item.uid"
            :label="item.nickname"
            :key="index"
            @click.native="clickInsurance(item)"
          >{{ item.nickname }}</Option>
        </Select>
      </FormItem>
      <FormItem label="救援类型" prop="rescue_type">
        <Select v-model="param.rescue_type" :label-in-value="true" @on-change="selecthelpType">
          <Option
            v-for="item in rescueTypeList"
            :value="item.id"
            :label="item.title"
            :key="item.id"
          >{{ item.title }}</Option>
        </Select>
      </FormItem>
      <Row>
        <Col span="20">
          <FormItem label="出发地" prop="start_address">
            <Input
              class="gw"
              v-model="param.start_address"
              @on-change="inputStartPlace"
              placeholder="请输入出发地"
              style="width: 100%"
            />
            <ul ref="seatTipOperation" v-show="startPlaceList.length != 0" class="xialakuang">
              <li v-for="(item,i) in startPlaceList" @click="selectStartPlace(item)">{{item.name}}</li>
            </ul>
          </FormItem>
        </Col>
        <Col span="3" offset="1">
          <Button style="width:100%" type="primary" @click="openMap('start')">请选择</Button>
        </Col>
      </Row>
      <Row v-show="param.rescue_type == 1">
        <Col span="20">
          <FormItem label="目的地" prop="end_address">
            <Input
              class="gw"
              v-model="param.end_address"
              @on-change="inputEndPlace"
              placeholder="请输入目的地"
              style="width: 100%"
            />
            <ul ref="seatTipOperation" v-show="endPlaceList.length != 0" class="xialakuang">
              <li v-for="(item,i) in endPlaceList" @click="selectEndPlace(item)">{{item.name}}</li>
            </ul>
          </FormItem>
        </Col>
        <Col span="3" offset="1">
          <Button style="width:100%" type="primary" @click="openMap('end')">请选择</Button>
        </Col>
      </Row>
      <FormItem label="指派方式" prop="type">
        <Select v-model="param.type" :label-in-value="true" @on-change="selectAssign">
          <Option :value="0" label="平台推送" :key="0">平台推送</Option>
          <Option :value="1" label="选择车队" :key="1">选择车队</Option>
        </Select>
      </FormItem>
      <FormItem label="选择车队" prop="fleet_id" v-show="param.type == 1">
        <Select v-model="param.fleet_id" :label-in-value="true" @on-change="selectCarTeam">
          <Option
            v-for="item in carTeamList"
            :value="item.fleet.id"
            :label="item.fleet.title"
            :key="item.fleet.id"
          >{{ item.fleet.title }}</Option>
        </Select>
      </FormItem>
      <FormItem label="选择司机" prop="fleet_uid" v-show="param.type == 1">
        <Select v-model="param.fleet_uid" :label-in-value="true">
          <Option
            v-for="item in driverList"
            :value="item.uid"
            :label="item.nickname"
            :key="item.id"
          >{{ item.nickname }}</Option>
        </Select>
      </FormItem>
      <FormItem label="保险报案号" prop="case_number" v-show="param.mode == 1">
        <Input class="gw" v-model="param.case_number" placeholder="请填写保险报案号"></Input>
      </FormItem>
      <FormItem label="车牌号:">
        <Col span="2">
          <Select class="scrolly" v-model="city" placeholder>
            <Option
              v-for="item in plateNoCity"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="2" offset="1">
          <Select class="scrolly" v-model="letter" placeholder>
            <Option
              v-for="item in plateNoLetter"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="1" offset="1" style="font-weight:bold;font-size:20px">·</Col>
        <Col span="17">
          <FormItem prop="plateNo">
            <Input
              v-model="param.car_number"
              @on-keyup="param.car_number=param.car_number.replace(/[^0-9A-Z]/g,'')"
              :maxlength="6"
              class="gw"
              placeholder="请输入车牌号码"
            ></Input>
          </FormItem>
        </Col>
      </FormItem>
      <FormItem label="车辆类型" prop="cartype_id">
        <Select v-model="param.cartype_id" :label-in-value="true">
          <Option
            v-for="item in carTypeList"
            :value="item.id"
            :label="item.title"
            :key="item.id"
          >{{ item.title }}</Option>
        </Select>
      </FormItem>
      <FormItem label="联系人" prop="nickname">
        <Input class="gw" v-model="param.nickname" placeholder="请填写联系人"></Input>
      </FormItem>
      <FormItem label="手机号码" prop="mobile">
        <Input class="gw" type="tel" :maxlength="11" v-model="param.mobile" placeholder="请填写手机号码"></Input>
      </FormItem>
      <FormItem label="结算方式" v-show="param.mode == 1" prop="balance_type">
        <Select v-model="param.balance_type" :label-in-value="true" @on-change="selectAssign">
          <Option :value="0" label="现结" :key="0">现结</Option>
          <Option :value="1" label="月结" :key="1">月结</Option>
        </Select>
      </FormItem>
      <FormItem label="现场照片" prop="apply_pic">
        <div class="demo-upload-list" v-for="(item,index) in apply_pic" :key="index">
          <template>
            <img :src="item" />
            <div class="demo-upload-list-cover">
              <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
            </div>
          </template>
        </div>
        <Upload
          ref="upload"
          :show-upload-list="false"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :before-upload="handleBeforeUpload"
          multiple
          type="drag"
          action="//jsonplaceholder.typicode.com/posts/"
          style="display: inline-block;width:58px;"
        >
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </FormItem>
      <FormItem label="备注" prop="insure_memo">
        <Input class="gw" v-model="param.insure_memo" placeholder="请填写备注"></Input>
      </FormItem>
    </Form>
    <p slot="footer">
      <Button @click="goback('param')" style="margin-left: 8px">返回</Button>
      <Button type="primary" @click="save('param')">保存</Button>
    </p>
    <wayRescueMap :Attribute="mapAttribute" @refreshData="getMapData"></wayRescueMap>
  </Modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import wayRescueMap from "@$@/components/WayRescue/wayRescueMapModal/wayRescueMap";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    wayRescueMap,
  },
  props: {
    lookAttribute: {
      type: Object,
      default() {
        return {
          showModal: false,
          title: "",
          disabled: false,
        };
      },
    },
    list: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    //这里存放数据
    return {
      rescueTypeList: [
        { title: "拖车服务", id: 1 },
        { title: "吊车服务", id: 2 },
        { title: "搭电服务", id: 3 },
        { title: "换胎服务", id: 4 },
      ],
      // 表单验证
      ruleValidate: {
        // mode: [
        //   {
        //     required: true,
        //     message: "请选择身份"
        //   }
        // ],
        // uid: [
        //   {
        //     required: true,
        //     message: "请选择用户"
        //   }
        // ],
        // insuranceId: [
        //   {
        //     required: true,
        //     message: "请选择用户"
        //   }
        // ],
        // rescue_type: [
        //   {
        //     required: true,
        //     message: "请选择救援类型"
        //   }
        // ],
        // start_address: [
        //   {
        //     required: true,
        //     message: "请输入出发地"
        //   }
        // ],
        // end_address: [
        //   {
        //     required: true,
        //     message: "请输入目的地"
        //   }
        // ],
        // type: [
        //   {
        //     required: true,
        //     message: "请选择指派方式"
        //   }
        // ],
        // fleet_id: [
        //   {
        //     required: true,
        //     message: "请选择车队"
        //   }
        // ],
        // fleet_uid: [
        //   {
        //     required: true,
        //     message: "请选择司机"
        //   }
        // ],
        // mobile: [
        //   {
        //     required: true,
        //     message: "请填写正确的手机号",
        //     pattern: /^1[3456789]\d{9}$/
        //     // trigger: "string"
        //   }
        // ],
      },
      param: {
        rescue_type: 1,
        uid: null,
        mode: 0,
        start_address: "",
        start_lng: "",
        start_lat: "",
        end_address: "",
        end_lng: "",
        end_lat: "",
        type: 0,
        fleet_id: null,
        fleet_uid: null,
        car_number: "",
        cartype_id: null,
        nickname: "",
        mobile: "",
        case_number: "",
        balance_type: 0,
        apply_pic: [],
        insure_memo: "",
        id: null,
      },
      insuranceId: null,
      userList: [],
      startPlaceList: [],
      endPlaceList: [],
      carTeamList: [],
      driverList: [],
      insuranceList: [],
      carTypeList: [],
      insuranceName: null,
      city: "粤",
      letter: "S",
      plateNoCity: [
        {
          value: "京",
          label: "京",
        },
        {
          value: "沪",
          label: "沪",
        },
        {
          value: "浙",
          label: "浙",
        },
        {
          value: "苏",
          label: "苏",
        },
        {
          value: "粤",
          label: "粤",
        },
        {
          value: "鲁",
          label: "鲁",
        },
        {
          value: "晋",
          label: "晋",
        },
        {
          value: "冀",
          label: "冀",
        },
        {
          value: "豫",
          label: "豫",
        },
        {
          value: "川",
          label: "川",
        },
        {
          value: "渝",
          label: "渝",
        },
        {
          value: "辽",
          label: "辽",
        },
        {
          value: "吉",
          label: "吉",
        },
        {
          value: "黑",
          label: "黑",
        },
        {
          value: "皖",
          label: "皖",
        },
        {
          value: "鄂",
          label: "鄂",
        },
        {
          value: "津",
          label: "津",
        },
        {
          value: "贵",
          label: "贵",
        },
        {
          value: "云",
          label: "云",
        },
        {
          value: "桂",
          label: "桂",
        },
        {
          value: "琼",
          label: "琼",
        },
        {
          value: "青",
          label: "青",
        },
        {
          value: "新",
          label: "新",
        },
        {
          value: "藏",
          label: "藏",
        },
        {
          value: "蒙",
          label: "蒙",
        },
        {
          value: "宁",
          label: "宁",
        },
        {
          value: "甘",
          label: "甘",
        },
        {
          value: "陕",
          label: "陕",
        },
        {
          value: "闽",
          label: "闽",
        },
        {
          value: "赣",
          label: "赣",
        },
        {
          value: "湘",
          label: "湘",
        },
      ],
      plateNoLetter: [
        {
          value: "A",
          label: "A",
        },
        {
          value: "B",
          label: "B",
        },
        {
          value: "C",
          label: "C",
        },
        {
          value: "D",
          label: "D",
        },
        {
          value: "E",
          label: "E",
        },
        {
          value: "F",
          label: "F",
        },
        {
          value: "G",
          label: "G",
        },
        {
          value: "H",
          label: "H",
        },
        {
          value: "I",
          label: "I",
        },
        {
          value: "J",
          label: "J",
        },
        {
          value: "K",
          label: "K",
        },
        {
          value: "L",
          label: "L",
        },
        {
          value: "N",
          label: "N",
        },
        {
          value: "M",
          label: "M",
        },
        {
          value: "O",
          label: "O",
        },
        {
          value: "P",
          label: "P",
        },
        {
          value: "Q",
          label: "Q",
        },
        {
          value: "R",
          label: "R",
        },
        {
          value: "S",
          label: "S",
        },
        {
          value: "T",
          label: "T",
        },
        {
          value: "U",
          label: "U",
        },
        {
          value: "V",
          label: "V",
        },
        {
          value: "W",
          label: "W",
        },
        {
          value: "X",
          label: "X",
        },
        {
          value: "Y",
          label: "Y",
        },
        {
          value: "Z",
          label: "Z",
        },
      ],
      mapAttribute: {
        showModal: false,
        title: "",
      },
      apply_pic: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "lookAttribute.showModal"() {
      if (
        this.lookAttribute.showModal == true &&
        this.lookAttribute.title == "添加"
      ) {
        this.getInsureList();
        this.getCarTypeList();
        this.getUserList();
      }
    },
  },
  //方法集合
  methods: {
    //   获取车队列表
    getCarTeamList() {
      $ajax.rescuepub_fleetlist({
          lat: this.param.start_lat,
          lng: this.param.start_lng,
          rescue_type: this.param.rescue_type,
          insure_id: this.insuranceId,
        },(res) => {
          this.carTeamList = res.data;
        }
      );
    },
    // 获取用户列表
    getUserList() {
      $ajax.user_list({ page: 1, pagesize: 999 }, (res) => {
        this.userList = res.data.list;
      });
    },
    // 获取保险人员
    getInsureList() {
      $ajax.userinsure_list({ page: 1, pagesize: 999 }, (res) => {
        this.insuranceList = res.data.list;
      });
    },
    // 获取车辆类型
    getCarTypeList() {
      $ajax.cartypeList({ page: 1, pagesize: 999 }, (res) => {
        this.carTypeList = res.data.list;
      });
    },
    //   选择身份
    selectIdentity(obj) {
      if (this.param.mode == 0) {
        this.insuranceId = null;
      }
    },
    // 选择保险人员
    selectInsurance(obj) {},
    // 选择救援类型
    selecthelpType(value) {
      this.param.fleet_id = null;
      this.param.fleet_uid = null;
      this.carTeamList = [];
      this.driverList = [];
    },
    // 点击保险人员
    clickInsurance(item) {
      this.insuranceId = item.insure_id;
      this.param.uid = item.uid;
      if (
        this.param.start_address != "" &&
        this.param.end_address != "" &&
        this.insuranceId != null
      ) {
        this.getCarTeamList();
      }
    },
    // 选择指派方式-*/
    selectAssign(obj) {
      if (this.param.type == 1) {
        this.getCarTeamList();
      } else {
        (this.param.fleet_id = null), (this.param.fleet_uid = null);
      }
    },
    // 选择车队
    selectCarTeam() {
      this.driverList = [];
      for (let index = 0; index < this.carTeamList.length; index++) {
        if (this.param.fleet_id == this.carTeamList[index].fleet.id) {
          this.driverList = this.carTeamList[index].driver_location;
        }
      }
    },
    // 输入出发地进行模糊查询
    inputStartPlace(e) {
      let that = this;
      if (e.target.value != "") {
        AMap.plugin("AMap.Autocomplete", function () {
          // 实例化Autocomplete
          var autoOptions = {
            city: "东莞市",
          };
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(e.target.value, function (status, result) {
            if (result.info == "OK") {
              that.startPlaceList = result.tips;
            }
          });
        });
      } else {
        that.startPlaceList = [];
      }
    },
    // 选择搜索出来的出发地
    selectStartPlace(item) {
      // 赋值
      this.startPlaceList = [];
      this.param.start_address = item.name;
      this.param.start_lng = item.location.lng;
      this.param.start_lat = item.location.lat;
      if (
        this.param.start_address != "" &&
        this.param.end_address != "" &&
        this.param.type == 1
      ) {
        this.getCarTeamList();
      }
    },
    // 输入目的地进行模糊查询
    inputEndPlace(e) {
      let that = this;
      if (e.target.value != "") {
        AMap.plugin("AMap.Autocomplete", function () {
          // 实例化Autocomplete
          var autoOptions = {
            city: "东莞市",
          };
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(e.target.value, function (status, result) {
            if (result.info == "OK") {
              that.endPlaceList = result.tips;
            }
          });
        });
      } else {
        that.endPlaceList = [];
      }
    },
    // 选择搜索出来的目的地
    selectEndPlace(item) {
      // 赋值
      this.endPlaceList = [];
      this.param.end_address = item.name;
      this.param.end_lng = item.location.lng;
      this.param.end_lat = item.location.lat;
      if (
        this.param.start_address != "" &&
        this.param.end_address != "" &&
        this.param.type == 1
      ) {
        this.getCarTeamList();
      }
    },
    // 打开地图
    openMap(type) {
      this.mapAttribute.showModal = true;
      this.mapAttribute.title = type;
    },

    // 地图返回的数据
    getMapData(obj) {
      if (this.mapAttribute.title == "start") {
        this.param.start_address = obj.name;
        this.param.start_lng = obj.lng;
        this.param.start_lat = obj.lat;
      } else {
        this.param.end_address = obj.name;
        this.param.end_lng = obj.lng;
        this.param.end_lat = obj.lat;
      }
    },
    handleRemove(file, index) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      this.apply_pic.splice(index, 1);
      this.param.apply_pic.splice(index, 1);
    },
    handleBeforeUpload(file) {
      let obj = new FormData();
      obj.append("file", file, file.name);
      $ajax.uploadImg(obj, (res) => {
        this.param.apply_pic.push(res.data.url);
        this.apply_pic.push("http://www.1c1l.com/" + res.data.url);
      });
    },
    save(name) {
      let obj = JSON.parse(JSON.stringify(this.param));
      obj.car_number = this.city + this.letter + this.param.car_number;
      this.$refs[name].validate((valid) => {
        if (valid) {
          $ajax.rescuepub_back(obj, (res) => {
            $app.toast(res.msg, true, () => {
              this.lookAttribute.showModal = false;
              this.param.apply_pic = [];
              this.param.car_number = "";
              this.apply_pic = [];
              this.$refs[name].resetFields();
              this.$emit("refreshData");
            });
          });
        }
      });
    },
    closeModal(name) {
      this.$refs[name].resetFields();
      this.param.car_number = "";
      this.param.apply_pic = [];
      this.apply_pic = [];
    },
    goback(name) {
      this.$refs[name].resetFields();
      this.param.apply_pic = [];
      this.apply_pic = [];
      this.param.car_number = "";
      this.lookAttribute.showModal = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.xialakuang {
  position: absolute;
  background-color: #fff;
  z-index: 999;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  margin: 5px 0;
  padding: 5px 0;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  li {
    transition: background 0.2s ease-in-out;
    margin: 0;
    line-height: normal;
    padding: 7px 16px;
    clear: both;
    color: #333;
    font-size: 14px !important;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
  }
  li:hover {
    background-color: #f8f8f9;
    color: #5887ef;
  }
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.placeList {
  position: absolute;
  background-color: #fff;
  z-index: 999;
  width: 391px;
  top: 125px;
  left: 50px;
  max-height: 200px;
  overflow: auto;
  margin: 5px 0;
  padding: 5px 0;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  li {
    transition: background 0.2s ease-in-out;
    margin: 0;
    line-height: normal;
    padding: 7px 16px;
    clear: both;
    color: #333;
    font-size: 14px !important;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
  }
  li:hover {
    background-color: #f8f8f9;
    color: #5887ef;
  }
}
</style>